import React,{Component} from "react"
import ReactDOM,{render} from "react-dom"
import Animate from 'rc-queue-anim'
import $ from "jquery"
import Comment from "./Comment.js"
import Jourpicture from "./Jourpicture.js"
import JourPictureAdd from "./JourPictureAdd.js"
import LaudPeople from "./LaudPeople.js"
export default class Jour extends Component {
	constructor(props){
		super(props)
		this.state={
			pictureReact:[],
			jourContent:"",
			showAllContent:{},
			laud:[],
			laudColor:{color:"black"},
			comment:[]
		}
	}
	componentWillMount(){
		//把有多少人赞数组拿出来，方便后续处理
		this.setState({
			laud:this.props.jour.laud
		})
		//初始化赞的颜色
		if(this.props.jour.laud.indexOf(this.props.username+"、")!=-1)
			this.setState({
				laudColor:{"color":"red"}
			})

		//把评论数组拿出来，方便后续处理
		this.setState({
			comment:this.props.jour.comment
		})

		//当说说的文字内容过多的处理
		let content=this.props.jour.content
		let contentCopy=content
		let showAllContent={cursor:"pointer",color:"blue",display:"none"}
		if(content.length>50){
			showAllContent.display="inlink-block"
			contentCopy=content.slice(0,50)
		}
		this.setState((prestate)=>{
			return ({
				jourContent:contentCopy,
				showAllContent:showAllContent
			})
		})


		//图片过多时候的处理
		var picture=this.props.jour.picture
		var pictureCount=picture.length
		if(pictureCount===1){
			let pictureArr=[]
			//组件中的height可以随便设置，因为会被componentDidMount的设置替换
			pictureArr.push(<Jourpicture key="1" src={"/img/"+picture[0]} col="col-lg-8 col-md-8 col-sm-8 col-xs-8 jour-picture" height="20px"/>)
			this.setState((prestate)=>{
				return ({
					pictureReact:pictureArr
				})
			})
			return ;
		}else if(pictureCount<=3){
			let pictureArr=[]
			for(let i=0;i<pictureCount;i++){
				pictureArr.push(<Jourpicture key={i} src={"/img/"+picture[i]} col="col-lg-4 col-md-4 col-sm-4 col-xs-4 jour-picture" height="20px"/>)
			}
			this.setState((prestate)=>{
				return ({
					pictureReact:pictureArr
				})
			})
			return ;
		}else if(pictureCount<=8){
			let pictureArr=[]
			for(let i=0;i<pictureCount;i++){
				pictureArr.push(<Jourpicture key={i} src={"/img/"+picture[i]} col="col-lg-3 col-md-3 col-sm-3 col-xs-3 jour-picture" height="20px"/>)
			}
			this.setState((prestate)=>{
				return ({
					pictureReact:pictureArr
				})
			})
			return ;
		}else{
			let pictureArr=[]
			for(let i=0;i<7;i++){
				pictureArr.push(<Jourpicture key={i} src={"/img/"+picture[i]} col="col-lg-3 col-md-3 col-sm-3 col-xs-3 jour-picture" height="20px"/>)
			}
			//这个是展开更多图片组件,这里props传值了一个函数，只要
			//子组件一调用这个属性，就立马执行了父组件的方法从而展开全部图片
			pictureArr.push(<JourPictureAdd key="10" showAllPicture={this.showAllPicture.bind(this)} src={"/img/"+picture[7]} col="col-lg-3 col-md-3 col-sm-3 col-xs-3 jour-picture" height="20px"/>)
			this.setState((prestate)=>{
				return ({
					pictureReact:pictureArr
				})
			})
			return ;
		}
	}

	componentDidMount(){
		let This=this
		let height=$(This.pictureEl).children(":first").width()
		$(This.pictureEl).find("img").attr("height",height+"px")	
		
		// 给说说图片的高度响应式
		$(window).on("resize",function(){
			//不加延时会造成点击右上角全屏按钮时，高度不准确
			setTimeout(function(){
				let height=$(This.pictureEl).children(":first").width()
				$(This.pictureEl).find("img").attr("height",height+"px")	
			},10)
		})
	}

	//点击展开所有图片就进行展开
	showAllPicture(){
		let picture=this.props.jour.picture
		let pictureCount=picture.length
		let height=$(this.pictureEl).children(":first").width()
		let pictureArr=[]
		for(let i=0;i<pictureCount;i++){
			pictureArr.push(<Jourpicture key={i} src={"/img/"+picture[i]} col="col-lg-3 col-md-3 col-sm-3 col-xs-3 jour-picture" height={height}/>)
		}
		this.setState((prestate)=>{
			return ({
				pictureReact:pictureArr
			})
		})
		return ;
	}

	//点击展开所有内容就进行展开
	showAllContent(){
		let showAllContent={cursor:"pointer",color:"blue",display:"none"}
		this.setState({
			jourContent:this.props.jour.content,
			showAllContent:showAllContent
		})
	}

	//点赞的按钮的相关
	laud(event){
		//点击动画
		let This=this
		let laud=this.state.laud.concat()
		let recoverLaud=this.state.laud.concat()
		//切换颜色和模拟赞人数的数据
		if(this.state.laudColor.color==="black"){
			laud.unshift(this.props.username+"、")
			this.setState({
				laudColor:{"color":"red"},
				laud:laud
			})
			$.post("/updateLaud",{
				"jourUserName":this.props.jour.jourUserName,
				"date":this.props.jour.date,
				"laud":laud
			},function(data){
				if(data==="-1"){
					alert("同志，赞失败")
					$(This.luadAnimated).fadeOut(300)
					This.setState({
						laud:recoverLaud,
						laudColor:{"color":"black"}
					})
				}
			})
			return ;	
		}
		else{
			let indexof=laud.indexOf(this.props.username+"、")
			laud.splice(indexof,1)
			this.setState({
				laudColor:{"color":"black"},
				laud:laud
			})
			$.post("/updateLaud",{
				jourUserName:this.props.jour.jourUserName,
				date:this.props.jour.date,
				laud:laud
			},function(data){
				if(data==="-1"){
					alert("同志，取消赞失败")
					$(This.luadAnimated).fadeIn(300)
					This.setState({
						laud:recoverLaud,
						laudColor:{"color":"red"}
					})
				}
			})
		}
	}

	//点击评论
	comment(event){
		let el=$(this.form)
		let off=$(el).attr("style")
		$(".jour-all").find("form").hide(200)
		if(off){
			let input=$(el).find("input")
			$(el).slideDown(200)
			input.get(0).placeholder="评论"+this.props.jour.jourUserName+" :"
			input.focus()
		}
	}

	//点击评论发送按钮,模拟数据
	label(event){
		let This=this
		let valEl=$(event.target).parent().find("input")
		let val=valEl.val()
		let comment=this.state.comment.concat()
		let recoverComment=this.state.comment.concat()
		let addContent={
			commentUserName:this.props.username,
			commentContent:val,
			answer:[]
		}
		comment.push(addContent)
		this.setState({
			comment:comment
		})
		valEl.val(" ")
		$(this.form).slideUp(200)
		$.post("/updateComment",{
			jourUserName:this.props.jour.jourUserName,
			date:this.props.jour.date,
			commentUserName:this.props.username,
			commentContent:val
		},function(data){
			if(data==="-1"){
				alert("同志！评论失败")
				This.setState({
					comment:recoverComment
				})
			}
		})
	}

	//回复的数据传到这个父组件进行模拟
	answer(val,name,nameContent){
		let This=this
		let comment=this.state.comment.concat()
		let recoverComment=this.state.comment.concat()
		let length=comment.length
		let content={anserUserName:this.props.username,anserContent:val}
		for(let i=0;i<length;i++){
			if(comment[i].commentUserName===name&&comment[i].commentContent==nameContent){
				if(!comment[i].answer)
					comment[i].answer=[content]
				else
					comment[i].answer.push(content)
				this.setState({
					comment:comment
				})
				let jourUserName=this.props.jour.jourUserName
				let date=this.props.jour.date
				let username=this.props.username
				$.post("/updateAnswer",{
					jourUserName:jourUserName,
					date:date,
					commentUserName:name,
					commentContent:nameContent,
					anserUserName:username,
					anserContent:val
				},function(data){
					if(data==="-1"){
						alert("同志！回复失败")
						This.setState({
							comment:recoverComment
						})
					}
				})
				break ;
			}

		}
	}

	//点击头像进行跳转到这个人的路由下
	otheruser(){
		console.log(1)
		let username=this.props.jour.jourUserName
		window.location="/user/"+username
	}
	render(){
		return (
			<div>
				<div className="jour-all">
					<div className="avatar-date-username">
						<img 
							className="img-circle jour-img-avatar" 
							src={"/img/"+this.props.jour.jourAvatar} 
							width="35px" 
							height="35px" 
							alt="头像"
							onClick={(e)=>this.otheruser(e)}
						/>
						<span className="jour-username">{this.props.jour.jourUserName}</span>
						<span className="jour-data">{this.props.jour.date}</span>
					</div>
					<div className={this.state.jourContent?"jour-content":"hide"}>
						{this.state.jourContent}
						<span 
							onClick={this.showAllContent.bind(this)} 
							style={this.state.showAllContent}>
							 全文
						</span>
					</div>
					<div 
						className={this.state.pictureReact?"row":"hide"} 
						ref={(pictureEl)=>this.pictureEl=pictureEl} 
						style={{"marginTop":"10px"}}
					>
						{this.state.pictureReact}
					</div>
					<div style={{margin:"20px 0 10px 0",textAlign:"right"}}>
						<span 
							onClick={this.laud.bind(this)}
							className="glyphicon glyphicon-thumbs-up jour-laud-icon"
							style={this.state.laudColor}
							>
						</span>
						<span 
							className="glyphicon glyphicon-pencil jour-comment-icon"
							onClick={this.comment.bind(this)}
						>
						</span>
					</div>
					<form 
						ref={(form)=>this.form=form}
						className="form-horizontal"
						style={{display:"none"}}
					>
						<div className="form-group">
							<div className="col-lg-10 col-md-10 col-sm-8 col-xs-8">
								<input type="text" className="form-control"/>
							</div>
							<label 
								style={{textAlign:"left",fontSize:"larger",color:"white",cursor:"pointer"}} 
								className="col-lg-2 col-md-2 col-sm-4 col-xs-4 control-label"
								onClick={this.label.bind(this)}
							>发送</label>
						</div>
					</form>
					<div className={this.state.laud?" ":"hide"}  style={{fontSize:"15px",marginBottom:"9px"}}>
						{this.state.laud.map(function(val,index){
							return <LaudPeople laud={val} key={index} />
						})}
						<span className={(this.state.laud.length)>0?" ":"hide"}>{this.state.laud.length}人觉得很赞</span>
					</div>
					<div style={{fontSize:"17px"}} className={this.state.comment?"":"hide"}>
						{this.state.comment?this.state.comment.map((val,index)=>{
							if(!val.commentUserName) return ;
							return (< Comment answer={this.answer.bind(this)} username={this.props.username} comment={val} key={index}/>)
						}):""}

					</div>
				</div>
				<div className="nav-bg"></div>
			</div>
		)
	}
}




















